<template>
  <view class="page-wrapper page-space">
    <view class="dict-item">
      <view class="dict-code">ConfigTypeEnum：</view>
      <view>{{ ConfigTypeEnum }}</view>
    </view>
    <view class="dict-item">
      <view class="dict-code">DataChangeTypeEnum：</view>
      <view>{{ DataChangeTypeEnum }}</view>
    </view>
    <view class="dict-item">
      <view class="dict-code">DataStatusEnum：</view>
      <view>{{ DataStatusEnum }}</view>
    </view>
    <view class="dict-item">
      <view class="dict-code">翻译：</view>
      <view>{{ value }}：{{ DataStatusEnum[value].value }}</view>
    </view>
    <view class="dict-item">
      <view class="dict-code">遍历：</view>
      <view v-for="(x) in DataStatusEnum" :key="x.value">{{ x.label }}：{{ x.value }}</view>
    </view>
    <view class="dict-item">
      <view class="dict-code">代码：</view>
      <view class="demo-code">
        const {
        <view style="padding-left: 1em">ConfigTypeEnum, </view>
        <view style="padding-left: 1em">DataChangeTypeEnum, </view>
        <view style="padding-left: 1em">DataStatusEnum</view>
        } = useDictMapperMap([
        <view style="padding-left: 1em">'ConfigTypeEnum', </view>
        <view style="padding-left: 1em">'DataChangeTypeEnum', </view>
        <view style="padding-left: 1em">'DataStatusEnum'</view>
        ]);
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import "./index.css";
import {useDictMapperMap} from "@/soar/hooks/dict";
import {ref} from "vue";
import {randomElement} from "@/soar/utils/random";

const { ConfigTypeEnum, DataChangeTypeEnum, DataStatusEnum } = useDictMapperMap(['ConfigTypeEnum', 'DataChangeTypeEnum', 'DataStatusEnum']);

const value = ref('');
setInterval(() => {
  value.value = randomElement(Object.keys(DataStatusEnum.value ?? {}))
}, 1500)
</script>

<style lang="scss">
@import "../index.css";
</style>
